<template>
    <div>

        <van-form ref="form">
            <van-form ref="form">
                <van-field v-if="!isEdit" readonly clickable name="食堂" is-link label="食堂" required
                    :value="formData.canteenName" placeholder="请选择食堂" @click="showPicker = true"
                    :rules=rules.canteenId />
                <van-field v-if="isEdit" readonly clickable name="食堂" label="食堂" required :value="formData.canteenName"
                    placeholder="请选择食堂" :rules=rules.canteenId />
                <van-field readonly clickable name="餐券日期" is-link label="餐券日期" required
                    :value="formData.mealticketApplyDate" placeholder="请选择预定日期" @click="showTimePicker = true"
                    :rules=rules.mealticketApplyDate />
                <van-field name="uploader" label="餐券数量" required :rules=rules.mealticketApplyNum>
                    <template #input>
                        <van-stepper v-model="formData.mealticketApplyNum" class="stepBox" integer min="1" max="1000" />
                    </template>
                </van-field>
                <van-field readonly clickable name="餐次" is-link label="餐次" required :value="formData.mealsTypeName"
                    placeholder="请选择预定餐次" @click="showTypePicker = true" :rules=rules.mealsType />
                <van-field v-model="formData.remarks" rows="3" autosize label="补充说明" type="textarea" maxlength="256"
                    placeholder="请输入补充说明" show-word-limit />
            </van-form>
        </van-form>
        <div class="top" v-if="show">
            <div class="topTitle">
                {{day}}
            </div>
        </div>
        <fullLoading v-if="loading"></fullLoading>
        <!-- 食堂名称选择 -->
        <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="canteenList" @select="onConfirm" />
        <!-- 预定餐次选择 -->
        <van-action-sheet v-model="showTypePicker" cancel-text="取消" :actions="mealsTypeList" @select="onTypeConfirm" />
        <!-- 预定日期 -->
        <van-calendar v-model="showTimePicker" @confirm="onTimeConfirm" />
        <!-- 包间选择 -->
    </div>
</template>
<script>
    import { add, edit, getDay } from '@/api/srvAssurance/smarcatering/electronMealticket';
    export default {
        data() {
            return {
                showPicker: false,
                showTypePicker: false,
                showTimePicker: false,
                formData: {
                    mealticketId: '',
                    canteenId: '', // 食堂标识
                    canteenName: '',
                    mealticketApplyNum: 1, // 人数
                    mealticketApplyDate: '',
                    mealsType: '',
                    mealsTypeName: '',
                    remarks: '',
                },
                day: '',
                rules: {
                    canteenId: [
                        { required: true, message: '请选择食堂', trigger: 'onChange' }
                    ],
                    mealticketApplyNum: [
                        { required: true, type: 'number', message: '请输入预定人数', trigger: 'onBlur' }
                    ],
                    mealticketApplyDate: [
                        { required: true, type: 'date', message: '餐券日期不能为空', trigger: 'onChange' }
                    ],
                    mealsType: [
                        { required: true, message: '请选择预定餐次', trigger: 'onChange' }
                    ],
                    remarks: [
                        { pattern: this.$commonReg.textAreaReg, message: this.$commonReg.textAreaMsg, trigger: 'blur' }
                    ],
                },
                pickerTime: new Date(),
                canteenList: [],
                mealsTypeList: [], // 预定餐次
                loading: false,
                isEdit: false,
                show: false,
                mealticketDayType: {
                    '1': '当天',
                    '2': '三天',
                    '3': '五天',
                    '4': '一周',
                    '5': '一个月',
                    '6': '无期限',
                    '7': '自定义',
                }
            }
        },
        methods: {
            getData(obj) {
                this.isEdit = true;
                for (var key in this.formData) {
                    this.formData[key] = obj.data[key];
                }
                // console.log(this.formData)
                this.getDay();
            },
            getDay() {
                this.show = true;
                getDay(this.formData.canteenId).then(res => {
                    if (res.code === 1000 && res.data) {

                        if (res.data.mtype === '6') {
                            this.day = '当前食堂餐券无期限'
                        } else if (res.data.mtype === '7') {
                            this.day = '当前食堂餐券有效期自餐券日期起  ' + res.data.day + '天内有效';
                        } else {
                            this.day = '当前食堂餐券有效期自餐券日期起  ' + this.mealticketDayType[res.data.mtype] + '内有效';
                        }
                    } else {
                        this.day = '尚未配置';
                    }
                })
            },
            // 保存
            handleSave(val) {
                this.loading = true;
                this.$refs.form.validate().then(() => {
                    let formData = {
                        canteenId: this.formData.canteenId,
                        mealticketApplyNum: this.formData.mealticketApplyNum,
                        mealticketApplyDate: this.formData.mealticketApplyDate,
                        mealsType: this.formData.mealsType,
                        mealticketId: this.formData.mealticketId,
                        remarks: this.formData.remarks,
                    }
                    if (!this.isEdit) {
                        delete formData.mealticketId;
                        add(formData).then(res => {
                            this.loading = false;
                            if (res.code === 1000) {
                                this.$Notify({ type: 'success', message: '保存成功！' });
                                this.$emit('close');
                                this.$emit('refresh');
                            }
                        }).catch(() => {
                            this.loading = false;
                        })
                    } else {

                        edit(formData).then(res => {
                            this.loading = false;
                            if (res.code === 1000) {
                                this.$Notify({ type: 'success', message: '保存成功！' });
                                this.$emit('close');
                                this.$emit('refresh');
                            }
                        }).catch(() => {
                            this.loading = false;
                        })
                    }
                })
            },
            // 预定餐次选择
            onTypeConfirm(item) {
                this.formData.mealsType = item.value;
                this.formData.mealsTypeName = item.name;
                this.showTypePicker = false;
            },
            // 食堂名称选择
            onConfirm(item) {

                this.formData.canteenId = item.canteenId;
                this.formData.canteenName = item.canteenName;
                this.showPicker = false;
                this.getDay();
                // this.show = true;

            },
            // 预定日期选择
            onTimeConfirm(time) {
                this.formData.mealticketApplyDate = new Date(time).format('yyyy-MM-dd');
                this.showTimePicker = false;
            },
            // 包间选择
            // 重置表单
            resetForm() {
                this.pickerTime = new Date();
                this.formData = {
                    canteenId: this.canteenList.length ? this.canteenList[0].canteenId : '', // 食堂标识
                    canteenName: this.canteenList.length ? this.canteenList[0].canteenName : '',
                    mealticketApplyNum: 1, // 人数
                    mealticketApplyDate: new Date(this.pickerTime).format('yyyy-MM-dd'),
                    mealsType: this.mealsTypeList.length ? this.mealsTypeList[0].value : '',
                    mealsTypeName: this.mealsTypeList.length ? this.mealsTypeList[0].name : '',
                    remarks: '',
                    mealticketId: '',
                }
                setTimeout(() => {
                    this.$refs.form.resetValidation();
                })
                this.loading = false;
                this.isEdit = false;
                this.show = false;
            }
        }
    }
</script>

<style scoped lang='less'>
    .stepBox /deep/.van-stepper__input {
        width: 80px;
    }

    .top {
        width: 80%;
        margin: 0 auto;
        /* border: 1px solid orange; */
        display: flex;
        background-color: rgb(247, 247, 232);
        /* margin-top: 15px; */
        margin-top: 25px;

        .topTitle {
            width: 100%;
            margin: 10px 0;
            font-size: 10px;
            text-align: center;
        }

        ul li {
            /* text-align: left; */
            line-height: 22px;

        }

        .icon {
            /* width: 45px; */
            margin: 0 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>